<div id="<?php echo $uniqid;?>" style="padding:5px">
    <table border="0" width="100%" cellspacing="1" cellpadding="5" class="formtable">

        <tr bgcolor="#FFFFFF">
            <td class="tlabel">办事材料名称：</td>
            <td><input type="text" style="width: 500px;"
                       class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                       placeholder="请输入事项名称.." v-model="params.title">
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel">排序：</td>
            <td><input name="sortorder" type="text"
                       class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                       placeholder="请输入排序.." v-model="params.sortorder"></td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel">表单内容：</td>
            <td style="padding-left: 0">
                <div id="zj<?php echo $uniqid;?>" style="padding:0px">
                    <table cellspacing="0" cellpadding="0" class="no-border">
                        <tbody>
                        <tr>
                            <td><a href="javascript:;" onclick="eventcomponentAdd();" class="l-btn l-btn-small l-btn-plain"><span
                                    class="l-btn-left l-btn-icon-left"><i class="iconfont icon-tianjia1"></i><span class="l-btn-text">增加</span></span></a></td>
                            <td>
                                <div class="datagrid-btn-separator"></div>
                            </td>
                            <td><a href="javascript:;" onclick="eventcomponentEdit();" class="l-btn l-btn-small l-btn-plain"><span
                                    class="l-btn-left l-btn-icon-left"><i class="iconfont icon-bianji"></i><span class="l-btn-text">编辑</span></span></a></td>
                            <td>
                                <div class="datagrid-btn-separator"></div>
                            </td>
                            <td><a href="javascript:void(0);" onclick="eventcomponentDelete();" class="l-btn l-btn-small l-btn-plain"><span
                                    class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shanchu"></i><span class="l-btn-text">删除</span></span></a></td>
                            <td>
                                <div class="datagrid-btn-separator"></div>
                            </td>
                            <td><a href="javascript:;" onclick="eventcomponentReload();" class="l-btn l-btn-small l-btn-plain"><span
                                    class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxin"></i><span class="l-btn-text">重载</span></span></a></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="con" onselectstart="return false;" style="-moz-user-select:none;">
                    <table id="eventcomponent"></table>
                </div>
                <div id="eventcomponentdlg" class="easyui-dialog" style="width:800px; height:500px;" title="信息框" closed="true"></div>
            </td>
        </tr>
    </table>
</div>
<script>
    var eventmaterialeditVm = new Vue({
        el: '#<?php echo $uniqid;?>',
        data: {
            params: JSON.parse("<?php echo addslashes($dataset);?>"),
        },
        mounted() {
            this.init();
        },
        methods: {
            init: function () {
                this.params.sortorder = this.params.sortorder ? this.params.sortorder : 500;
            },
        }
    });

    var eventcomponentAdd = function () {
        $("#eventcomponentdlg").dialog({
            title: '添加表单组件',
            closed: false,
            width: 800,
            height: 500,
            cache: false,
            href: '/admin/eventcomponent/add?material_id=' + eventmaterialeditVm.params.id,
            modal: true,
            buttons: [{
                text: '保存',
                id: 'eventcomponentsubmit',
                iconCls: 'icon-ok',
            }, {
                text: '关闭',
                iconCls: 'icon-no',
                handler: function () {
                    $("#eventcomponentdlg").dialog('close');
                }
            }]
        });
    };
    var eventcomponentEdit = function (id) {
        let row = $('#eventcomponent').datagrid('getSelected');
        let rowid = 0;
        if(!row){
            if(!id) {
                $.messager.alert('提示', '请先选择要编辑的行！', 'warning');
            }else{
                rowid = id;
            }
        }else{
            if(row.level){
                $.messager.alert('提示', '请选择办事材料！', 'warning');
                return;
            }
            rowid = row.id;
        }
        $("#eventcomponentdlg").dialog({
            title: '编辑信息',
            closed: false,
            width: 800,
            height: 500,
            cache: false,
            href: '/admin/eventcomponent/edit?id=' + rowid,
            modal: true,
            buttons: [{
                text: '保存',
                id: 'eventcomponentsubmit',
                iconCls: 'icon-ok',
            }, {
                text: '关闭',
                iconCls: 'icon-no',
                handler: function () {
                    $("#eventcomponentdlg").dialog('close');
                }
            }]
        });
    };
    var eventcomponentDelete = function (id) {
        var row = $('#eventcomponent').datagrid('getSelected');
        if (row) {
            $.messager.confirm('提示', '确定删除吗？', function (r) {
                if (r == true) {
                    $.messager.progress();
                    $.post('/admin/eventcomponent/delete', {id: row.id}, function (data) {
                        $.messager.progress('close');
                        if (parseInt(data.ret) === 0) {
                            $.messager.show({
                                title: '提示',
                                msg: data.msg,
                                timeout: 3000,
                                showType: 'slide'
                            });
                            eventcomponentReload();
                        } else {
                            $.messager.alert('提示', data.msg, 'warning');
                        }
                    }, 'json');
                }
            });
        } else {
            $.messager.alert('提示', '请先选择要删除的行！', 'warning');
        }
    };
    var eventcomponentReload = function () {
        $("#eventcomponent").datagrid('reload');
    };
    var eventcomponentSearch = function () {
        $("#eventcomponent").datagrid({
            width: 680,
            height: 400,//高度
            singleSelect: true,//如果为true，则只允许选择一行
            striped: true,//是否显示斑马线效果。
            rownumbers: true,//如果为true，则显示一个行号列。
            pagination: false,//是否显示分页
            method: 'post',
            sortName: 'sortorder',
            sortOrder: 'desc',
            url: '/admin/eventcomponent/get',
            queryParams: {material_id: eventmaterialeditVm.params.id},
            fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
            nowrap: true,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
            selectOnCheck: true,
            checkOnSelect: true,
            toolbar: '#tb<?php echo $uniqid;?>',
            columns: [[
                {field: 'title', title: '字段名', width: fixWidth(40)},
                {field: 'type', title: '类型', width: fixWidth(15), formatter: function (value, rowData, rowIndex) {
                        switch (parseInt(value)){
                            case 1: return "单行文本";
                            case 2: return "多行文本";
                            case 3: return "单选";
                            case 4: return "多选";
                            case 5: return "文件上传";
                        }
                    }},
                {field: 'sortorder', title: '排序', width: fixWidth(10)},
                {field: 'action', title: '操作', width: fixWidth(35), formatter: function (value, rowData, rowIndex) {
                        if (!rowData.level) {
                            return '<a href="javascript:;" class="l-btn l-btn-small" onclick="eventcomponentEdit(' + rowData.id + ')" ><span class="l-btn-left l-btn-icon-left"><span class="l-btn-text">编辑</span><span class="l-btn-icon icon-ok">&nbsp;</span></span></a>  ' +
                                '<a href="javascript:;" class="l-btn l-btn-small" onclick="eventcomponentDelete(' + rowData.id + ')" ><span class="l-btn-left l-btn-icon-left"><span class="l-btn-text">删除</span><span class="l-btn-icon icon-cancel">&nbsp;</span></span></a>';
                        }
                    }},
            ]],
            onDblClickRow: function (index, field) {
                eventcomponentEdit();
            },
        });
    };
    $(function () {
        eventcomponentSearch();
        $('#eventmaterialsubmit').click(function () {
            let act = (eventmaterialeditVm.params.id>0) ? 'edit' : 'add';
            $.post('/admin/eventmaterial/' + act, eventmaterialeditVm.params, function (data) {
                if (data.ret === 0) {
                    $.messager.show({
                        title: '提示',
                        msg: data.msg,
                        timeout: 3000,
                        showType: 'slide'
                    });
                    if(typeof(eventmaterialReload)!=='undefined'){
                        eventmaterialReload();
                    }
                    $("#eventmaterialdlg").dialog('close');
                } else {
                    $.messager.alert('提示', data.msg, 'warning');
                }
            }, 'json');
        });
    });
</script>